<template>
  <input type="text" v-model="msg1"><br>
  <input type="text" v-model="msg2"><br>
  <p id="a"></p>
</template>

<script setup lang='ts'>
import { ref, reactive, watchEffect } from 'vue'

const msg1 = ref('')
const msg2 = ref('')

watchEffect((oninvalidate) => {   // 监听函数中存在的依赖
  oninvalidate(() => {
    // 监听逻辑之前执行
    // console.log(1)
  })
  const pTag: HTMLParagraphElement = document.querySelector('#a') as HTMLParagraphElement
  msg2.value = msg1.value + '1'
  console.log(msg2)
  // console.log(pTag)
}, {
  flush: 'pre',    // 刷新时机: pre组件更新前执行; sync: 强制效果始终同步触发; post: 组件更新后执行
  onTrigger(e) {    // 帮助调试用
    console.log(e)
  }
})

</script>

<style lang='scss' scoped>

</style>